<%--
  Created by IntelliJ IDEA.
  User: HXM
  Date: 2021-11-10
  Time: 20:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flash PasswordBox Letters - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/demo.css">
    <script type="text/javascript" src="EasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="EasyUI/citiselect.js"></script>
<%--    <script type="text/javascript" src="css/jquery-2.1.0.js"></script>--%>

</head>
<body>
<h2>Flash PasswordBox Letters</h2>
<p>This example shows how to flash the entered password letter by letter.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:400px;padding:50px 60px">
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" prompt="Username" iconWidth="28"/>
    </div>
    <div style="margin-bottom:20px">
        <input id="pass" class="easyui-passwordbox" prompt="Password" iconWidth="28"/>
    </div>
</div>
<!-- <div id="viewer"></div> -->

<form id="ff" method="post">
    <table>
        <tbody>
        <tr>
            <td>
                <label for="province">省：</label>
            </td>
            <td>
                <input id="province" name="province" type="text" class="easyui-combobox"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="city">市：</label>
            </td>
            <td>
                <input id="city" name="city" type="text" class="easyui-combobox"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="county">区：</label>
            </td>
            <td>
                <input id="county" name="county" type="text" class="easyui-combobox"/>
            </td>
        </tr>
        </tbody>
    </table>
</form>

<script type="text/javascript">
    $(function () {
        //省市区三级联动
        $.citySelect({$province: $('#province'), $city: $('#city'), $County: $('#county')});
        $('#ff').form('load', {'province': '广东省', 'city': '深圳市', 'county': '罗湖区'});
    });

    $.extend($.fn.combobox.methods, {
        setIndex: function (jq, index) {
            if (!index)
                index = 0;
            var data = $(jq).combobox('options').data;
            var vf = $(jq).combobox('options').valueField;
            $(jq).combobox('setValue', eval('data[index].' + vf));
        },

        getIndex: function (jq) {
            var index = 0;
            var data = $(jq).combobox('options').data;
            var vf = $(jq).combobox('options').valueField;
            var value = $(jq).combobox('getValue');
            if (data != null && data.length != null) {
                for (var i = 0; i < data.length; i++) {
                    if (value == eval('data[i].' + vf))
                        index = i;
                }
            }
            return index;
        }
    });
</script>
<style>
    #viewer {
        position: relative;
        padding: 0 60px;
        top: -70px;
        font-size: 54px;
        line-height: 60px;
    }
</style>
</body>
</html>

